@extends('admin.common.admin')
@section('cnt')
    {{-- 面包屑导航 --}}
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 管理员管理
        <span class="c-gray en">&gt;</span> 添加用户
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        {{--消息提示--}}
        @include('admin.common.msg')
        <form class="form form-horizontal" id="useradd" method="post" action="{{route('admin.admin.store')}}">
            @csrf
            <div class="row cl">
                <label class="form-label  col-sm-2"><span class="c-red">*</span>用户名：</label>
                <div class="formControls  col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" name="username">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label  col-sm-2"><span class="c-red">*</span>真实姓名：</label>
                <div class="formControls  col-sm-9">
                    <input type="text" class="input-text" value="" placeholder=""  name="truename">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label  col-sm-2"><span class="c-red">*</span>初始密码：</label>
                <div class="formControls  col-sm-9">
                    <input type="password" class="input-text" autocomplete="off" value="" placeholder="密码" id="password"
                           name="password">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label  col-sm-2"><span class="c-red">*</span>确认密码：</label>
                <div class="formControls  col-sm-9">
                    <input type="password" class="input-text" autocomplete="off" placeholder="确认新密码"
                           name="password_confirmation">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label  col-sm-2"><span class="c-red">*</span>性别：</label>
                <div class="formControls  col-sm-9 skin-minimal">
                    <div class="radio-box">
                        <input name="gender" type="radio" value="先生" checked>
                        <label for="sex-1">先生</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="sex-2" value="女士" name="gender">
                        <label for="sex-2">女士</label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label  col-sm-2"><span class="c-red">*</span>手机：</label>
                <div class="formControls  col-sm-9">
                    <input type="text" class="input-text" value="{{old('phone')}}" name="phone">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label  col-sm-2"><span class="c-red">*</span>邮箱：</label>
                <div class="formControls  col-sm-9">
                    <input type="text" class="input-text" placeholder="@" name="email" id="email">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2">角色：</label>
                <div class="formControls col-sm-10">
                    <span class="select-box" style="width:150px">
                        <select name="role_id" class="select" size="1">
                            @foreach($roleData as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                                @endforeach
                        </select>
                    </span>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="添加用户">
                </div>
            </div>
        </form>
    </article>
@endsection
@section('js')
    <script>
        // jquery validate前端验证插件
        // https://www.runoob.com/jquery/jquery-plugin-validate.html
        $("#useradd").validate({
            rules: {
                username: {
                    required: true,
                    minlength: 4
                },
                truename: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true
                },
                password_confirmation:{
                    equalTo:"#password"
                },
                phone: {
                    required: true,
                    phone: true,
                },
                email: {
                    required: true,
                    email: true,
                }
            },
            //取消回车事件
            onkeyup: false,
            //验证成功后，回调事件 dom对象
            success: "valid",
            submitHandler:function (form) {
                //js表单提交
                form.submit();
            }
        });
        //自定义验证规则
        jQuery.validator.addMethod('phone',function(value,element){
            var tel=/^1[3-9]\d{9}$/;
            return this.optional(element)||(tel.test(value));
        },"请输入合法的手机号");
    </script>
@endsection